<template>
	<div class="sponsor-view-rd">
		<common-header title="设置"></common-header>
		<ul class="fn_ul">
			<li class="fn_li upload-wrap">
				<span class="fn_label">头像</span>
				<span class="fn_content">
					<img :src="user.avatar ? BASE_URL + user.avatar : defaultAvatar" class="avatar">
					<form id="uploadForm" enctype="multipart/form-data" ref="uploadForm">
				      <input type="file" name='image' @change="pushImg($event)" accept="image/jpeg,image/png,image/gif" alt="avatar">
				      </form>
				</span>
			</li>
			<li class="fn_li">
				<span class="fn_label">昵称</span>
				<span class="fn_content" @click="changeNickNameShow">{{user.nice_name}}</span>
			</li>
		</ul>
		<ul class="fn_ul">
			<li class="fn_li">
				<span class="fn_label">绑定手机</span>
				<span class="fn_content">{{user.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')}}</span>
			</li>
<!-- 			<li class="fn_li">
				<span class="fn_label">绑定微信</span>
				<span class="fn_content"></span>
			</li>
			<li class="fn_li">
				<span class="fn_label">我的邮箱</span>
				<span class="fn_content"></span>
			</li> -->
		</ul>
		<ul class="fn_ul">
			<li class="fn_li">
				<router-link :to="'/userauth'">
				<span class="fn_label">投资人认证</span>
				<span class="fn_content">{{user.investor_status == 1 ? '已认证':'未认证'}}</span>
				</router-link>
			</li>
			<li class="fn_li">
				<span class="fn_label">高级认证</span>
				<span class="fn_content">未认证</span>
			</li>
		</ul>
		<ul class="fn_ul">
			<li class="fn_li" @click="changePasswordShow">
				<span class="fn_label">密码管理</span>
				<span class="fn_content"></span>
			</li>
		</ul>
<!-- 		<ul class="fn_ul" v-if="hasBsl">
			<li class="fn_li" @click="cleanCache">
				<span class="fn_label">清除缓存</span>
				<span class="fn_content"></span>
			</li>
		</ul> -->
		<a href="javascript:;" class="logout-btn" @click="logout">退出登录</a>

		<popup v-model="showChangePassword" position="bottom" max-height="50%">
	        <div class="pop-content">
	        	<label class="login-input-wrap yzm-wrap">
					<input placeholder="请输入验证码" v-model="code" maxlength="4" type="number" class="yzm">
					<button class="btn-getyzm" @click="getLoginCode" :disabled="!codeBtnStatus" :class="{'no-send': !codeBtnStatus}">{{codeBtnText}}</button>
				</label>
				<label class="login-input-wrap">
					<input placeholder="请输入新密码" v-model="newpassword" type="password">
					<i class="icon icon-clear"></i>
				</label>
				<div style="margin-top: 40px;">
					<x-button @click.native="subChangePW" :show-loading="subChangePWStatus" :disabled="subChangePWStatus" plain type="primary">提交</x-button>
		          	<x-button @click.native="showChangePassword = false" plain type="default">关闭</x-button>
		        </div>
	        </div>
	    </popup>
	    <popup v-model="showChangeNickName" position="bottom" max-height="50%">
	        <div class="pop-content">
				<label class="login-input-wrap">
					<input placeholder="请输入新昵称" v-model="newNickName">
					<i class="icon icon-clear"></i>
				</label>
				<div style="margin-top: 40px;">
					<x-button @click.native="subChangeNN" :show-loading="subChangeNNStatus" :disabled="subChangeNNStatus" plain type="primary">提交</x-button>
		          	<x-button @click.native="showChangeNickName = false" plain type="default">关闭</x-button>
		        </div>
	        </div>
	    </popup>
	</div>
</template>

<style scoped lang="scss">
	.sponsor-view-rd{background-color:#ffffff;}
	.upload-wrap{
		position:relative;
		#uploadForm{
			float:right;
			input{
				opacity: 0;
			    width: 100%;
			    height: 100%;
			    position: absolute;
			    left: 0;
			    top: 0;
			}
		}
	}
	.fn_ul{
		&:first-child{margin-top: 0;}
		margin-top: 10px;
	}
	.fn_li{
		margin-left: a(30px);
		padding-right: a(30px);
		height: 50px;
		line-height:50px;
		&:after{
			background-color:#f2f4f6;
		}
		.fn_label{font-size: a(28px);color:#666;}
		.fn_content{font-size: a(28px);color:#666;}
		.fn_content:after{
		    display: inline-block;
		    content: "";
		    width: 7px;
		    height: 7px;
		    margin-left: 10px;
		    border-top: 1px solid #ccc;
		    border-right: 1px solid #ccc;
		    -webkit-transform: rotate(45deg);
		    transform: rotate(45deg);
		}
	}
	.avatar{
		width: a(60px);
		height: a(60px);
	}
	.logout-btn{
		margin-top: 10px;
		display: block;
		text-align: center;
		font-size: 16px;
		@include lh(50px);
	}
	.pop-content{padding:20px 30px;background-color:#ffffff;border-radius: 10px;}
	.login-input-wrap{
		width: 100%;
	    height: 49px;
	    display: block;
	    border-bottom: 1px solid #e5e5e5;
	    box-sizing: border-box;
	    overflow: hidden;
	    position: relative;

	    input{
	    	outline: 0;
		    width: 100%;
		    border: none;
		    font-size: 16px;
		    line-height: 16px;
		    margin-top: 19px;

		    &.yzm{
		    	height: 30px;
			    width: 64.18%;
			    border-radius: 0;
			    padding-bottom: 8px;
			    border-bottom: 1px solid #e5e5e5;
		    }
	    }
	   	.btn-getyzm{
	   		position: absolute;
	   		right: 0;
		    bottom: 0;
		    border: none;
		    font-size: 15px;
		    padding: 0 6px;
		    color: #000;
		    background: none;
		    width: 30.74%;
		    height: 30px;
		    line-height: 30px;
		    border: 1px solid #000;
		    border-radius: 5px;

		    &.no-send{
		    	color: #999!important;
    			border: 1px solid #999!important;
		    }
	   	}
	}
	.yzm-wrap{
		border: none;
	}
	.weui-btn{font-size: 14px;}
	.weui-btn_plain-default{
		color: #b2b2b2;
    	border: 1px solid #b2b2b2;
	}
</style>

<script>
	import axios from 'axios'
	import commonHeader from '__cp/commonHeader';
	import defaultAvatar from '__assets/images/avatar.png';
	import store from '@/store/index';
	import {getCode,changePassword,changeNickName} from '__api';
	export default{
		name: 'user-set-view',
		components:{commonHeader},
		data(){
			return{
				defaultAvatar: defaultAvatar,
				user:store.state.user.user,
				showChangePassword: false,
				showChangeNickName: false,
				mobile:'',
				code:'',
				codeBtnStatus: true,
				codeBtnText: '获取验证码',
				newpassword:'',
				subChangePWStatus:false,
				newNickName: '',
				subChangeNNStatus:false,
				hasBsl: false
			}
		},
		watch: {
			'$route'(to,from){
				this.$router.go(0);
			}
		},
		mounted(){
			this.$nextTick(()=>{
				this.mobile = store.state.user.user.mobile;
				//this.hasBsl = BSL ? true : false;
			})
		},
		methods:{
			logout(){
				this.$vux.toast.text('退出成功','top')
				store.dispatch('delUserInfo');
				setTimeout(() => {
					this.$router.push({ name:'IndexView'})
				},500)
			},
			changePasswordShow(){this.showChangePassword = true;},
			getLoginCode(){
				let timerCount = 60;
				this.codeBtnStatus = false;
				this.codeBtnText = 60 + 's后重发'
				let timer = setInterval(()=>{
					timerCount --;
					this.codeBtnText = timerCount + 's后重发'
					if(timerCount <= 0){
						clearInterval(timer);
						this.codeBtnText = '获取验证码'
						this.codeBtnStatus = true;
					}
				},1000)
				getCode({mobile: this.mobile}).then( res => {
					if(res.status == 0){
						this.$vux.toast.text(res.msg?res.msg:'网络超时','middle');
					}
				})
			},
			subChangePW(){
				if(!this.code){
					this.$vux.toast.text('验证码不能为空','top')
					return false;
				}
				if(!this.newpassword){
					this.$vux.toast.text('密码不能为空','top')
					return false;
				}
				changePassword({
					mobile: this.mobile,
					user_pwd: this.newpassword,
					confirm_user_pwd: this.newpassword,
					code: this.code
				}).then(res=>{
					if(res.status == 0){
						this.$vux.toast.text(res.msg?res.msg:'网络超时','middle');
					} else if(res.status == 1) {
						this.$vux.toast.text('修改成功','top')
						store.dispatch('delUserInfo');
						setTimeout(() => {
							this.$router.push({ name:'IndexView'})
						},1000)
					}
				})
			},
			changeNickNameShow(){this.showChangeNickName = true;},
			subChangeNN(){
				changeNickName({
					nicename: this.newNickName
				}).then(res=>{
					console.log(res)
					if(res.status == 1){
						this.$vux.toast.text('修改成功','top');
						let us = store.state.user.user;
		            	us.nice_name = this.newNickName;
		            	window.localStorage.setItem('user',JSON.stringify(us));
						this.$set(this.user,'nice_name',this.newNickName);
					} else {
						this.$vux.toast.text(res.msg?res.msg:'网络超时','middle');
					}
				})
			},
			cleanCache(){
				// if(BSL){
				// 	BSL.CleanData();
				// 	this.$vux.toast.text('已清理','middle');
				// } else {
				// 	this.$vux.toast.text('系统错误','middle');
				// }
			},
			pushImg: function(e,i){
		    	var self = this
		    	let file = e.target.files[0]

		    	if(file.size > 1 * 100 * 1024) {
		    		alert("上传图片过大");
		    		return false;
		    	}

		    	/* eslint-disable no-undef */
		    	let param = new FormData()  // 创建form对象
		    	param.append('file', file, file.name)  // 通过append向form对象添加数据,  轻逛设置的 Content-Disposition 的name 为 image,所以第一个参数写 image，其他情况用 file

		    	let config = {
		    		headers: {'Content-Type': 'multipart/form-data'},
		    	}

		      // 添加请求头
		      axios.post('/api/wap/index.php?ctl=avatar&tpl=1&act=upload&uid='+store.state.user.user.id, param, config)
		          .then(res => {
		            if (res.status == 200 && res.data.status == 1) {
		            	let us = store.state.user.user;
		            	us.avatar = res.data.small_url;
		            	window.localStorage.setItem('user',JSON.stringify(us));
		            	
		            	this.$router.go(0)
		            }
		          })
		      },
		}
	};

</script>